<template>
	<view class="pages">
		<view class="card" v-for="(item,index) in datalist" :key="item.id" @click="gdetil(item,index)">
			<view class="num">{{index+1}}、</view>
			<!-- <view class="ab" >{{item.title}}</view> -->
			<view class="ab" :style="{'color':(item.is_photo==1&&!item.result.frist&&item.result.showImg&&item.result.check_static!=1?'#e1221e':'#666')}">{{item.title}}</view>
			<view class="gto">
				<image v-if ="item.is_photo==1&&!item.result.frist&&item.result.showImg" :src="baseURL+item.result.showImg" mode=""></image>
				<image v-else-if="!item.result.frist&&item.result.check_static==1" src="../../static/fengxianxuncha/sels.png" mode=""></image>
				<image v-else-if ="item.is_photo==0&&item.result.frist" src="../../static/fengxianxuncha/unsels.png" mode=""></image>
				<image v-else-if ="item.is_photo==1&&item.result.frist" src="../../static/fengxianxuncha/phon.png" mode=""></image>
				<image v-else src="../../static/fengxianxuncha/close.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="inputbox">
			<input type="text" value="" placeholder="请留下您的联系方式"/>
		</view>
		<view class="inputbox">
			<input type="text" value="" placeholder="请留下您的姓名"/>
		</view> -->
		<view class="cards">
			<view class="row">
				<text class="nowrap">巡检情况</text>
				<view style="width:100%;" class="textarea">
					<textarea v-model="content" placeholder="请输入文字描述" />
				</view>
			</view>
			<view class="row">
				<text class="nowrap">巡检视图 <text>*</text></text>
				<view class="pre_pic">	
					<image v-for="(item,index) in picsarr" :key='index' :src="item" mode=""></image>
					<image src="../../static/fengxianxuncha.1/jia.png" @click="updatafile" mode=""></image>
				</view>
			</view>
		</view>
		<view class="">
			<button type="primary" class="btntj" @click="saveFxCheck()">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist:[{
					id:1,
					is_photo:0,
					result:{
						showImg:'',
						check_static:'',
						frist:true,
					}
				}],
				listId:1,
				picsarr:[],
				pics:'',  //图片
				content:'',
				baseURL:this.$API.baseURL
			};
		},
		onLoad(option){
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.hide();}
			}, 100);
			// #endif
			
			if(option){
				this.listId=option.id
				uni.setStorageSync("ssp_point",option.id);
			}else{
				this.listId = uni.getStorageSync("ssp_point");
			}
			this.fxCheckList();
		},
		onShow(){
			if(uni.getStorageSync("xuncha")){
				this.datalist = JSON.parse(uni.getStorageSync("xuncha"));
				var _this = this
				this.datalist.forEach(function(item,index){
					if(!item.result){
						_this.datalist[index].result = {
							showImg:'',
							check_static:'',
							frist:true,
						}
					}else{
						_this.datalist[index].result.showImg = item.result.pics.split(',')[1]
					}
				})
				// console.log(_this.datalist)
			}
		},
		methods:{
			//上传图片
			updatafile(){
				var _this = this;
				uni.chooseImage({
					sourceType: ["camera"],
					sizeType: "compressed",
					// count: 1,
					success: (res) => {
						// _this.picsarr = res.tempFilePaths;
						res.tempFilePaths.forEach(function(item,index){
							uni.uploadFile({
								url: _this.$API.upload,
								name: 'file',
								filePath: item,
								success: function(resdata) {
									_this.picsarr.push(item);
									resdata.data = JSON.parse(resdata.data);
									_this.pics +=','+resdata.data.fileName;
								},
								fail: function(res) {
									uni.showToast({
										title:"上传失败",
										icon:'none'
									})
									// console.log('上传失败', res);
								}
							});
						})
						
					}
				});
			},
			//提交
			saveFxCheck(){
				var dataResul = {
						list:[],
						fxpoint_id:this.listId,
						userid:uni.getStorageSync("userid")
				}
				for (var i = 0; i < this.datalist.length; i++) {
					if(this.datalist[i].result&&!this.datalist[i].result.frist){
						dataResul.list.push(this.datalist[i].result)
					}else{
						uni.showToast({
							title:'巡检全部完成才能提交哦',
							icon:'none'
						})
						return false;
						break
					}
				}
				if(this.pics){
					dataResul.pics = this.pics
					dataResul.content = this.content
				}else{
					uni.showToast({
						title:'请上传巡检视图',
						icon:'none'
					})
					return false;
				}
				console.log(dataResul)
				dataResul = JSON.stringify(dataResul)
				var _this = this;
				uni.request({
					url:this.$API.saveFxCheck,
					method:"POST",
					data:{
						para:dataResul
					},
					header:this.$API.get_head(),
					success: (res) => {
						uni.showToast({
							title:'提交成功',
						})
						
						uni.removeStorageSync('to_user');
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},200)
					}
				})
			},
			fxCheckList(){
				var _this = this;
				uni.request({
					url:this.$API.fxCheckList,
					method:"POST",
					data:{
						where:"{fxpoint_id:"+this.listId+"}",
						userId:uni.getStorageSync("userid"),
					},
					header:this.$API.get_head(),
					success: (res) => {
						// console.log(res)
						_this.datalist = res.data.rows;
						var sty = JSON.stringify(res.data.rows)
						uni.setStorageSync("xuncha",sty);
						
						_this.datalist.forEach(function(item,index){
							_this.datalist[index].result = {
								showImg:'',
								check_static:'',
								frist:true,
							}
						})
					}
				})
			},
			gdetil(item,index){
				uni.navigateTo({
					url:'/pages/huihuandeweizhi/fengxianxuncha.1?index='+index+'&detil='+JSON.stringify(item),
				})
			}
		},
	}
	
		
</script>

<style>
	.card{display: flex;justify-content: space-between;padding:20upx 30upx;margin:0 20upx 20upx 20upx;background:#FFFFFF;border-radius:20upx;align-items: center;}
	.card .gto{width:70upx;min-width: 70upx;height:70upx;}
	.card .gto image{width:70upx;min-width: 70upx;height:70upx;margin-left:10px;}
	.card .ab{color:#666666;}
	.inputbox{margin:0 20upx 20upx 20upx;}
	.inputbox input{background:#FFFFFF;border-radius:10upx;height:30upx;padding:20upx;}
	.btntj{margin:40upx auto;width:75%;font-size: 30rpx;}
	
	.cards{padding:20upx 30upx;margin:0 20upx 20upx 20upx;background:#FFFFFF;border-radius:20upx;}
	.row{display: flex;justify-content:flex-start;}
	.nowrap{white-space: nowrap;padding:15upx 0;}
	textarea{width:90%;border:1upx solid #CCCCCC;margin:2%;}
	.textarea{padding:15rpx;}
	.pre_pic{display: flex;justify-content: space-between;padding:15upx;flex-flow: wrap;}
	.pre_pic image{width:150upx;max-width:150upx;min-width:150upx;height:225upx;border-radius:10upx;margin-right:20upx;margin-bottom:10upx;}
	.pre_pic image:nth-child(3n){margin-right:0;}
</style>
